<!DOCTYPE html>
<html>
      <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="title" content="vps-monitor">
  <meta name="description" content="vps-monitor">
  <meta name="keywords" content="vps-monitor">
  <title>vps monitor</title>
  <script src="//cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
  <link rel="stylesheet" href="//cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css">
  <script src="//cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
    <body >
       
        <div class="ui grid">
            <div class="one wide column"></div>
            <div id="container" class="fourteen wide column">
                 <h1 class="ui header">故障机器列表总数:{{{{raw}}}}{{vpsList.length}}{{{{/raw}}}}</h1>
                <table class="ui single line table">
                    <thead>
                        <tr>
                            <th>IP</th>
                            <th>最后活跃时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody v-if="loading">
                        <tr>
                            <td colspan="3">数据加载中,请稍后...</td>
                        </tr>
                    </tbody>
                    <tbody v-if="!loading">
                        {{{{raw}}}}
                        <tr v-for="vps in vpsList">
                            <td>{{vps.ip}}</td>
                            <td>{{format(vps.time)}}</td>
                            <td><button class="ui red button" v-on:click="del(vps.id, $event)"><i class="recycle icon"></i>删除记录</button></td>
                        </tr>
                        {{{{/raw}}}}
                    </tbody>
                </table>
            </div>
            <div class="one wide column"></div>
        </div>
    </body>
    <script>
    var app = new Vue({
      el: '#container',
      data: {
        vpsList: [],
        loading: true
      },
      methods:{
        format: function(time){
            return new Date(time * 1000).toLocaleString()
        },
        del:function(id, e){
            
            $.ajax({
                url: "/api/bad/"+id,
                type: "DELETE",
                success: function () {
                    reload()
                },
                error: function (resp) {
                    alert('删除错误')
                }
            })
        }
      },
      created: function () {
        var self = this
        $.ajax({
          url: "/api/badlist",
          type: "GET",
          success: function (data) {
            self.loading = false
            self.vpsList = data
          },
          error: function (resp) {
            if(resp.status == 401){
                location.href = "login.html"
            } 
            
          }
        })
      }
    })
    function reload(){
        $.ajax({
          url: "/api/badlist",
          type: "GET",
          success: function (data) {
            app.loading = false
            app.vpsList = data
          },
          error: function (resp) {
            if(resp.status == 401){
                location.href = "login.html"
            } else{
                alert('数据加载错误')
            }
            
          }
        })
    }
    </script>
</html>